<template>
  <div
    class="commissionTemplateHeadComponent"
    v-if="oItem"
    :style="{
      paddingTop: oItem.main.contentPaddingTop + 'px',
      paddingBottom: oItem.main.contentPaddingBottom + 'px',
      paddingLeft: oItem.main.contentPaddingLR + 'px',
      paddingRight: oItem.main.contentPaddingLR + 'px',
    }"
  >
    <div
      class="content"
      :style="{
        borderTopLeftRadius: oItem.main.contentBorderRadiusTop + 'px',
        borderTopRightRadius: oItem.main.contentBorderRadiusTop + 'px',
        borderBottomLeftRadius: oItem.main.contentBorderRadiusBottom + 'px',
        borderBottomRightRadius: oItem.main.contentBorderRadiusBottom + 'px',
      }"
    >
      <div class="left">
        <span class="leftIcon" v-if="oItem.main.headLeftIcon">
          <i class="bg" :style="{ backgroundColor: oItem.main.headButtonBgColor }"></i>
          <i
            class="icon"
            :class="oItem.main.headLeftIcon"
            :style="{ color: oItem.main.headButtonBgColor }"
          ></i>
        </span>
        <span class="txt" :style="{ color: oItem.main.headTitleFontColor }">{{
          oItem.main.headTitle
        }}</span>
      </div>
      <div class="right">
        <div class="style1" v-if="oItem.main.style === 1">
          <button
            :style="{
              backgroundColor: oItem.main.headButtonBgColor,
              color: oItem.main.headButtonFontColor,
            }"
          >
            <i class="iconfont icon-tianjia"></i>
            <span>添加</span>
          </button>
        </div>
        <div class="style2" v-if="oItem.main.style === 2">
          <a href="javascript:;">
            <span
              class="btn"
              :style="{
                backgroundColor: oItem.main.headButtonBgColor,
                borderColor: oItem.main.headButtonFontColor,
                color: oItem.main.headButtonFontColor,
              }"
              ><i class="iconfont icon-xuanfuanniu1"></i>添加</span
            >
            <span class="txt">这里有很多新模板！快戳我 >></span>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Bus from "@/utils/bus";
import { mapState } from "vuex";
export default {
  name: "commissionTemplateHeadComponent",
  data() {
    return {
      oItem: null,
    };
  },
  created() {},
  props: ["item", "ename", "id"],
  components: {},
  mounted() {
    this.$nextTick(() => {
      this.init();
    });
    const emitName = this.ename + this.id;
    Bus.$off(emitName);
    Bus.$on(emitName, (control) => {
      this.oItem = null;
      this.$nextTick(() => {
        this.oItem = JSON.parse(control);
      });
    });
  },
  methods: {
    //页面初始化
    init() {
      // //console.log("进入init");
      this.oItem = null;
      this.oItem = JSON.parse(JSON.stringify(this.item));
    },
  },
  computed: mapState(["decorate"]),
  watch: {},
};
</script>
<style scoped lang="scss">
.commissionTemplateHeadComponent {
  .content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    box-sizing: border-box;
    background-color: #fff;
    .left {
      display: flex;
      align-items: center;
      .leftIcon {
        position: relative;
        height: 30px;
        width: 30px;
        z-index: 1;
        margin-right: 8px;
        .bg {
          background-color: #feefee;
          opacity: 0.15;
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          z-index: 2;
          border-radius: 100%;
        }
        .icon {
          color: #ed5246;
          font-size: 16px;
          position: absolute;
          z-index: 3;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }

      .txt {
        font-size: 16px;
        min-width:70px;
      }
    }
    .right {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      .style1 {
        button {
          display: flex;
          align-items: center;
          background-color: #f05246;
          border: none;
          color: #fff;
          padding: 7px 15px;
          border-radius: 30px;
          i {
            margin-right: 5px;
            font-size: 14px;
          }
          span {
            font-size: 14px;
          }
        }
      }
      .style2 {
        a {
          display: flex;
          align-items: center;
          .btn {
            font-size: 14px;
            border: 1px solid #ddd;
            padding: 2px 5px;
            display: flex;
            align-items: center;
            border-radius: 2px;
            margin-right: 10px;
            min-width:58px;
          }
          .txt {
            font-size: 12px;
            color: #999;
            display: flex;text-align: right;
            justify-content: flex-end;
          }
        }
      }
    }
  }
}
</style>
